let oCart = $('.cart-body');
let oReduce = $('.red');
let oAdds = $('.add');
let oItem = $('.list-item');
let oAll = $('#cheAll');
let oOnes = $('.che');
let oSelectNum = $('.select-num');
let oSelectMoney = $('.select-money');


let username = localStorage.getItem('LOGIN_USER');

if (username) {
    // 请求数据
    render();
    async function render() {  
        const res = await Ajax('get', '../php/apiDoc/showCart.php', {
            username
        })
        // console.log(res);
        oCart = $('.cart-body');
        const { status,  data } = res;
        if (status) {
            let cartHTML = '';
            data.forEach((v, i) => {
                const {goods_title , goods_img , goods_price , num , goods_id ,cart_id } = v;
                cartHTML += `
                <div class="list-item">
                <div class="good-check">
                    <input type="checkbox" name="" id="che${i}" class="che"><label for="che${i}"></label>
                </div>
                <div class="good-img">
                    <img src="${goods_img}" alt="">
                </div>
                <div class="good-name">${goods_title}</div>
                <div class="good-price">${goods_price}</div>
                <div class="good-num">
                    <span class="red" index="${goods_id}">-</span><input type="text" value="${num}" class="num-input"><span class="add" index="${goods_id}">+</span>
                </div>
                <div class="good-price-total">${num * goods_price}</div>
                <div><span class="good-cancel" cart="${cart_id}">x</span></div>
            </div>
                `;
            })
            oCart.html(cartHTML);
        }
        // 生成之后执行后面饿代码

        oItem = $('.list-item');
        oAll = $('#cheAll');
        oOnes = $('.che');

        // 商品列表里的点击事件
        oItem.on('click', (e) => {  
            target = e.target;
            if (target.className === 'add') {
                // 数量加
                // 这里的id是商品id
                let id = target.getAttribute('index');
            add({
                username: 'cc',
                num: 1,
                id
            }).then(res => {
                const { status, msg } = res;
                if (status) { 
                    let num = $(target).prev().val();
                    num = (num * 1) + 1
                    $(target).prev().val(num);
                    // 小计
                    $(target).parent().next().html(num * $(target).parent().prev().html());
                    total();
                    return;
                    
                } else {
                    alert(msg);
                }
            })
            }
            

            // 数量减
            if (target.className === 'red') {
                let id = target.getAttribute('index');
                add({
                    username: 'cc',
                    num: -1,
                    id
                }).then(res => {
                    const { status, msg } = res;
                    if (status) {
                        if ($(target).next().val() > 1) {
                            let num = $(target).next().val();
                            num = (num * 1) - 1;
                            $(target).next().val(num);
                            // 小计
                            $(target).parent().next().html(num * $(target).parent().prev().html());
                            total();
                            return;
                        }
                        alert('商品数量不能小于1');
                        return;
                        
                    } else {
                        alert(msg);
                    }
                })
            }
            
            
        
            // 单删
            if (target.className === 'good-cancel') {
                // 样式删掉
                let id = target.getAttribute('cart');
                $(target).parent().parent().remove();
                deleteOne({
                    id
                }).then(res => {
                    const { status, msg } = res;
                    if (status) {
                        // 单删的时候需要再次判断反选
                        oOnes = $('.che');
                        let i;
                        for(i = 0 ; i < oOnes.length;i++){
                            if(!$(oOnes[i]).prop('checked')){
                                break;
                            }
                        }
                        oAll.prop('checked', i === oOnes.length);
                        labelStyle();
                        total();
                    } else {
                        alert(msg);
                    }
                })

                
                return;
            }

        })
        // 全选
        oAll.on('click', function () {  
            oOnes.prop('checked', oAll.prop('checked'));
            labelStyle();
            total();
        })

        // 单选
        oOnes.on('click', function () {  
            let i;
            for(i = 0 ; i < oOnes.length;i++){
                if(!$(oOnes[i]).prop('checked')){
                    break;
                }
            }
            oAll.prop('checked', i === oOnes.length);
            labelStyle();
            total();
        })
    }
} else {
    alert('请先登录');
    // location.href = '../html/reg-login.html'
}




// label样式函数
function labelStyle() {  
// label样式跟着复选框变
    if (oAll.prop('checked')) {
        // 移除none的属性
        $('.cart-title label').css('background', '');
        // 添加背景图
        $('.cart-title label').css('background-image', 'url(../img/bg.png)');
        $('.cart-title label').css('background-position', '-1px -1px');
        $('.cart-title label').css('background-size', '20px 20px');
    } else {
        $('.cart-title label').css('background', 'none');
        
    }
    // 单选框也是
    for (i = 0; i < oOnes.length; i++) {
        if ($(oOnes[i]).prop('checked')) {
            // 移除none的属性
            $(oOnes[i]).next().css('background', '');
            // 添加背景图
            $(oOnes[i]).next().css('background-image', 'url(../img/bg.png)');
            $(oOnes[i]).next().css('background-position', '-1px -1px');
            $(oOnes[i]).next().css('background-size', '20px 20px');
        
        } else {
            $(oOnes[i]).next().css('background', 'none');
        }
    }
}

// 计算总计函数
function total() {  
    oOnes = $('.che');
    let numTotal = 0;
    let moneyTotal = 0;
    for (let i = 0; i < oOnes.length; i++){
        if ($(oOnes[i]).prop('checked')) {
            numTotal += $(oOnes[i]).parent().parent().find('.num-input').val() * 1;
            moneyTotal += $(oOnes[i]).parent().parent().find('.good-price-total').html() * 1;
            
        }
    }
    oSelectNum.html(numTotal);
    oSelectMoney.html(moneyTotal);

}